<template>
    <div id="footer">
        <div class="copyinfo center">
            <div class="freelink" v-if="showLink">

	            <el-popover placement="top" width="180">
		            <img src="images/bananatok_group.png" width="100%" alt="">

		            <span slot="reference"><img src="@/assets/contact_biyong.png" alt="" height="30"></span>
	            </el-popover>
	            <!--部分钱包app不能跳转，改为上面的直接显示二维码-->
	            <!--<a href="https://0.plus/xgame_cn" class="freeLink" target="_blank"><img src="@/assets/contact_biyong.png" alt=""></a>-->
	            <a href="https://github.com/xGame-XG/Xgame" class="freeLink" target="_blank">
		            <img src="@/assets/contact_github.png" alt="">
	            </a>
            </div>
            <div :class="color==='white'?'c-fff':'c-333'">Copyright © 2020 <b class="project-name" @click="dialogVisible = true">{{projectTitle}}</b> All Rights Reserved</div>
        </div>

	    <!--点弹出的层-->
	    <el-dialog title="我們不對以下國家或地區提供服務" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
		    <div class="c-red">{{serviceArea}}</div>

		    <span slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span>
	    </el-dialog>
    </div>
</template>

<script type="text/javascript">

	import { serviceArea } from '@/libs/lang'
	import { mixins } from "@/mixins/mixins";

    export default {
        name: 'footter',
        props:{
	        color: { type: String, default: 'black' },
	        showLink: { type: Boolean, default: false },
        },
	    mixins:[mixins],
        data () {
            return {
	            dialogVisible: false,
	            serviceArea:serviceArea,
				visible:''
            }
        },
        computed: {
        },
        created () {
        },
	    methods:{
		    handleClose (done) {
			    done();
		    }
	    }
    }
</script>

<style lang="less" scoped>

    /*公共变量*/
    @import '~@/assets/global.less';

    /***********************************footer******************/
    #footer {color:#334;padding:0px 0px 20px;margin-top: 20px;}
    .copyinfo {
	    color:#6e7b87;
	    .freeLink{
		    padding:10px;
		    img{height:30px;}
	    }
	    .project-name{text-decoration: underline;font-weight: bold;cursor: pointer}
    }

    /**********************适应************************/
    @media screen and (max-width: @MINSCREEN){

    }



</style>
